<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>政务数据资产普查系统</title>
<link rel="stylesheet" href="../../public/libs/layui/css/layui.css">
<link rel="stylesheet" href="../../public/css/main.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_540221_mtvfb4bu66y4aemi.css">
</head>
<body>
	<!--静态展示,内容动态加载tabAdd操作引入 -->
	<div class="role_table" id="layerwrap">
		<!-- <form class="layui-form" > -->

		<div class="layui-form-item">
			<div class="layui-input-inline">
				<input type="text" name="title" placeholder="请输入角色名称" autocomplete="off" class="layui-input" v-model="searchData.name">
			</div>
			<div class="layui-input-inline">
				<button class="layui-btn" lay-submit @click="getList">
					<i class="mine-icon">&#xe613;</i>搜索
				</button>
			</div>
			<div class="layui-input-inline">
				<button class="layui-btn" data-method="notice" data-type="addform" data-title="数据元新增" @click="addButton">
					<i class="mine-icon">&#xe6d2;</i>新增
				</button>
			</div>
			<!-- <div class="layui-input-inline">
				<button class="layui-btn" data-size="500px" data-method="offset" data-type="export"
					data-title="确定要导出用户数据吗？">
					<i class="mine-icon">&#xe63d;</i>导出数据
				</button>
			</div>
			<div class="layui-input-inline">
				<button class="layui-btn" data-size="500px" data-method="offset" data-type="import"
					data-title="Excel导入">
					<i class="mine-icon">&#xe627;</i>Excel导入
				</button>
			</div> -->
			<div class="layui-input-inline">
				<button class="layui-btn" @click="deleteAll">
					<i class="mine-icon">&#xe609;</i>批量删除
				</button>
			</div>
		</div>

		<table class="layui-hide" id="layui_table" lay-filter="layerTable" lay-data="{id: 'idTest'}"></table>

		<div id="role_layer" style="display: none">
			<form id="role_form" class="layui-form" action="">
				<div class="layui-form-item">
					<input type="hidden" name="id" v-model="formList.id">
					<label class="layui-form-label">角色名称</label>
					<div class="layui-input-block">
						<input type="text" name="name" lay-verify="required" autocomplete="off" placeholder="请输入角色名称" class="layui-input" v-model="formList.name">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">描述</label>
					<div class="layui-input-block">
						<input type="text" name="remark" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" v-model="formList.remark">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">角色授权</label>
					<div class="layui-input-block">
						<menu-tree></menu-tree>
					</div>
				</div>
				
				<button v-show="buttonDisp" class="layui-btn layui-submit" lay-submit="" lay-filter="formSubmit">立即提交</button>
			</form>
		</div>
	
	</div>
	
</body>
	
	<script src="../../public/libs/jquery-2.1.1.min.js"></script>
	<script src="../../public/libs/layui/layui.js"></script>
	<script src="../../public/libs/vue.js"></script>
	<script src="../../public/libs/layui/lay/modules/xtree.js"></script>
	<script src="../../components/menuTree.js"></script>
	<!-- <script src="../public/js/index.js"></script> -->

	<script>
		var vm = new Vue({
			el:'.role_table',
			data:{
				roleList: [],
				formList: {
					id: '',
					name: '',
					menuIds: '',
					menuList: '',
					remark: ''
				},
				buttonDisp: true,
				delIds: [],
				searchData: {
					name: ''
				},
				requestType: 'post'
			},
			methods: {
				getList () {
					layui.use('table', function(){
					  var table = layui.table;
					  
					  table.render({
					    elem: '#layui_table'
					    ,id: 'idTest'
					    ,url:'/role/list'
					    ,page: true //开启分页
					    ,where: vm.searchData
					    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
					    ,cols: [[
      					  {type: 'checkbox'}
					      ,{field:'id', title: 'ID'}
					      ,{field:'name', title: '角色名称'}
					      ,{field:'remark', title: '描述'}
					      ,{field:'lock', title:'操作',templet: '#template', width: 280}
					    ]]
					  });

					  table.on('tool(layerTable)', function(obj){
					    var data = obj.data;
					    if(obj.event === 'detail'){
					      // layer.msg('ID：'+ data.id + ' 的查看操作');
					      vm.detailButton(data);
					    } else if(obj.event === 'edit'){
					    	vm.editButton(data);
					    } else if(obj.event === 'del'){
					    	vm.deleteButton(data.id);
					    }
					  });

					  table.on('checkbox(layerTable)', function(obj){
					    var checkStatus = table.checkStatus('idTest')
					    console.log("checkStatus: ", checkStatus)
					    $.each(checkStatus.data, function (index, item) {
					    	vm.delIds.push(item.id);
					    })
						console.log("vm.delIds: ", vm.delIds)
					  });

					});
				},
				refreshData () {
					for (var i in vm.formList) {
						vm.formList[i] = ''
					}
				},
				validate () {
					layui.use(['form', 'layedit', 'laydate'], function(){
						var form = layui.form
						,layer = layui.layer
						,layedit = layui.layedit
						,laydate = layui.laydate;

						form.verify({
							title: function(value){
								if(value.length < 5){
									return '标题至少得5个字符啊';
								}
							}
							,pass: [/(.+){6,12}$/, '密码必须6到12位']
							,content: function(value){
								layedit.sync(editIndex);
							}
						});
						form.on('submit(formSubmit)', function(data){
							data.field.menuIds = getMenuList()
						    $.ajax({
						    	type: vm.requestType,
						    	url: '/role',
						    	contentType: "application/json; charset=utf-8",
						    	dataType: "json",
						    	data: JSON.stringify(data.field),
						    	success: function (res) {
						    		vm.getList();
						    		vm.refreshData();
						    		layer.close(layeForm)
					        		menuTreeModel.render();
					        		vm.requestType = 'post'
						    	}
						    })
						    return false;
						});
					})
				},
				addButton () {
					layui.use('layer', function(){
					    layeForm = layer.open({
					    	title: '新增',
					        type : 1,
					        area : [ '80%', '80%' ],
					        scrollbar : false,
					        zIndex : 100,
					        cancel: function () {
					        	vm.refreshData();
					        	vm.buttonDisp = true;
					        	menuTreeModel.render();
					        },
					        content : $('#role_layer')
					    });
					});
				},
				detailButton (data) {
					for (var i in vm.formList) {
						vm.formList[i] = data[i]
					}
					menuTreeLoad(vm.formList.menuList)
					this.addButton();
					vm.buttonDisp = false;
				},
				editButton (data) {
					vm.requestType = 'put'
					console.log("data: ", data.menuList)
					for (var i in vm.formList) {
						vm.formList[i] = data[i]
					}
					menuTreeLoad(vm.formList.menuList)
					this.addButton();
				},
				deleteButton (id) {
					var ids = [];
					ids.push(id)
					console.log("ids: ", ids)
					vm.deleteRow(ids)
				},
				deleteAll () {
					vm.deleteRow(vm.delIds);
				},
				deleteRow (ids) {
					layui.use('layer', function(){
					    layeConfirm = layer.confirm('您确定要删除么？', {
					        btn : [ '确定', '取消' ]
					    }, function() {
					        $.ajax({
					        	url: '/role',
					        	data: JSON.stringify(ids),
					        	contentType: "application/json; charset=utf-8",
					        	dataType: "json",
					        	type: 'delete',
					        	success: function (res) {
					        		layer.close(layeConfirm)
					        		vm.getList();
					        		vm.delIds = [];
					        	}
					        })
					    });
					});
				}
			},
			created () {
				this.getList();
				this.validate();
			}
		})
	</script>

	<script type="text/html" id="template">
		<a class="layui-btn layui-btn-primary layui-btn-sm" lay-event="detail">查看</a>
		<a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
		<a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a>
	</script>


</html>